<template>
  <h1>{{ obj }}</h1>
  <button @click="obj.age++">张三变</button>
  <button @click="obj.cp.age++">张三的CP变~</button>
</template>

<script>
// 监听 reactive 响应式对象：
//  注意点：
//    1. 没有分新旧值，都是同一个内存地址
//    2. 默认深度监听到自身属性和子对象的属性
//    3. 如果监听的属性是基本类型，第一个参数要写成函数内部返回属性
import { reactive, watch } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: '张三',
      age: 18,
      cp: {
        name: '李四',
        age: 17,
      },
    })

    // watch(obj, newVal => {
    //   console.log(111, 'obj发生了变化', newVal)
    // })

    console.log(obj)

    // 🔔情况1：监听的属性是个对象
    // watch(obj.cp, newVal => {
    //   console.log(222, 'obj.cp发生了变化', newVal)
    // })

    // 🔔情况2：监听的属性是个基本类型数据，需要写成函数内部返回属性写法
    watch(
      () => obj.age,
      newVal => {
        console.log(222, 'obj.age发生了变化', newVal)
      },
    )

    // 🔔 可选配置项： deep 开启深度监听，immediate 立即执行
    watch(
      () => obj.cp,
      newVal => {
        console.log(333, 'obj.cp发生了变化', newVal)
      },
      { deep: true, immediate: true },
    )

    return { obj }
  },
}
</script>

<style></style>
